<template>
  <div class="echarts_box">
    <div class="echarts" ref="echarts_box"></div>
    <div class="title" :style="{ fontSize: vueFontSize.fontSize(0.07) + 'px' }">
      {{ data.title }}
    </div>
    <!---------------------- 无数据是显示 ---------------------->
    <!-- <Nodata class="Nodata" v-show="data.length == 0"></Nodata> -->
  </div>
</template>


<script>
import { mapState, mapActions, mapGetters } from "vuex";
import fontSize from "@/modules/fontSize";
export default {
  props: {
    data: {
      // 返回的数据
      type: Array | Object,
      default: function () {
        return { title: "", value: 30 };
      },
    },
    fontSize: {
      type: String | Number,
      default: 1,
    },
    label: {
      type: String,
      default: "",
    },
    img: {
      // 图片地址
      type: Object | String,
      default: () => require("@/assets/images/echarts/ybpbj.png"),
    },
  },
  computed: {},
  watch: {
    fontSize: "drawLine", // 数值变化是更新图表
    data: "drawLine", // 数值变化是更新图表
  },
  data() {
    return {
      temp: 0,
      vueFontSize: fontSize,
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      try {
        this.$nextTick(() => {
          var _this = this;
          var cw = document.body.clientWidth;
          let graphicSize = 1;
          if (cw > 1200) {
            graphicSize = 1;
          } else {
            graphicSize = 1.1;
          }
          var myChart = _this.$echarts.init(_this.$refs.echarts_box);
          var datas = {
            value: this.data.value,
            name: this.data.name,
            type: 1,
            radiusType: 1,
          };

          var fontColor = "#fff";
          let noramlSize = fontSize.fontSize(0.06);
          let center = ["50%", "80%"];
          let wqradius, nqradius, kdradius;

          wqradius = "100%";
          nqradius = "90%";
          kdradius = "145%";

          // let wqColor = "rgba(80, 152, 237,0.9)";
          // let nqColor = [
          //   [
          //     datas.value / 100,
          //     new _this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
          //       {
          //         offset: 0,
          //         color: "rgba(248,182,45,1)",
          //       },
          //       {
          //         offset: 0.5,
          //         color: "rgba(125,103,179,1)",
          //       },
          //       {
          //         offset: 1,
          //         color: "rgba(33,109,195,1)",
          //       },
          //     ]),
          //   ],
          //   [1, "#2C3638"],
          // ];

          let option = {
            // backgroundColor: "#000",
            title: {
              show: true,
              x: "center",
              bottom: "0%",
              text: datas.name,
              textStyle: {
                fontWeight: "700",
                fontSize: fontSize.fontSize(0.082),
                color: fontColor,
              },
            },
            //   grid: {
            //   left: "3%",
            //   right: "6%",
            //   bottom: "4%",
            //   top: "4%",
            //   height:"20%",
            //   containLabel: false,
            // },
            tooltip: {
              show: false,
            },
            graphic: {
              elements: [
                {
                  type: "image",
                  z: 3,
                  style: {
                    image: this.img,
                    width: fontSize.fontSize(1.05) * graphicSize, //自适应大小,
                    height: (fontSize.fontSize(1.05) * graphicSize) / 2, //自适应大小,
                  },
                  left: "center",
                  top: "2%",
                },
              ],
            },
            series: [
              {
                name: "刻度文字",
                type: "gauge",
                radius: kdradius,
                center: center,
                startAngle: 180,
                endAngle: 0,
                z: 7,
                splitNumber: 5,
                min: 0,
                max: 100,
                axisTick: {
                  show: true,
                  lineStyle: {
                    color: "rgba(10, 123, 114,1)", //刻度线颜色
                    width: 1,
                  },
                  length: 8,
                  splitNumber: 6,
                },
                splitLine: {
                  show: false,
                },
                axisLine: {
                  lineStyle: {
                    width: 25,
                    opacity: 0,
                  },
                },
                axisLabel: {
                  distance: -17,
                  fontSize: noramlSize,
                  color: "rgba(186, 206, 31,1)",
                },
                pointer: {
                  show: true,
                  width: 2,
                  length: "90%",

                  //  color: 'rgba(0, 246, 255,1)',
                },
                itemStyle: {
                  normal: {
                    //color: "#0af",//wqColor
                    color: new _this.$echarts.graphic.LinearGradient(
                      0,
                      0,
                      1,
                      0,
                      [
                        {
                          offset: 0,
                          color: "rgba(230, 0, 18,1)",
                        },
                        {
                          offset: 0.5,
                          color: "rgba(230, 0, 18,1)",
                        },
                        {
                          offset: 1,
                          color: "rgba(230, 0, 18,1)",
                        },
                      ]
                    ),
                  },
                },
                detail: {
                  show: false,
                  offsetCenter: [0, "30%"], //显示数值的位置
                  rich: {
                    value: {
                      fontSize: 11,
                      lineHeight: 10,
                      color: "#1e87f0",
                      fontWeight: "700",
                    },
                    company: {
                      fontSize: 11,
                      lineHeight: 20,
                      color: "#1e87f0",
                    },
                  },
                },
                data: [datas.value],
              },
              // {
              //   name: "内层盘",
              //   type: "gauge",
              //   z: 6,
              //   radius: nqradius,
              //   startAngle: 180,
              //   endAngle: 0,
              //   center: center,
              //   axisLine: {
              //     lineStyle: {
              //       color: nqColor,
              //       width: 6,
              //       opacity: 0.9,
              //     },
              //   },
              //   splitNumber: 0,
              //   min: 0,
              //   max: 100,
              //   axisTick: {
              //     show: false,
              //   },

              //   axisLabel: {
              //     show: true,
              //   },
              //   pointer: {
              //     show: false,
              //   },

              //   detail: {
              //     show: 0,
              //   },
              // },
            ],
          };

          myChart.setOption(option);
          //   myChart.off("click");
          //   /* 点击事件 */
          //   myChart.on("click", (params) => {});
          //   /* 大小自适应 */
          //   window.addEventListener("resize", function () {
          //     myChart.resize();
          //   });
          //   myChart.resize();
        });
      } catch (e) {
        console.log(e);
        // 错误处理代码片段
      }
    },
  },
};
</script>


<style lang="scss" scoped>
.echarts_box {
  width: 20%;
  float: left;
  // width: 100%;
  // height: 130px;
  // display: flex;
  // align-items: center;
  // flex-direction: column;
  padding: 1.6vh 0 0vh 0;
  position: relative;
  // justify-content: space-between;
  .echarts {
    width: 100%;
    height: 100px;
  }
  .title {
    color: #ffffff;
    top: -13px;
    text-align: center;
    width: 100%;
    position: relative;
  }
}
@media screen and (max-width: 1200px) {
  .echarts_box {
    height: 180px;
    .echarts {
      margin-top: 10px;
      height: 130px;
    }
  }
}
</style>